<template>
  <div class="page">
    <el-table
      :data="listData"
      stripe
      :header-cell-style="{ 'background-color': 'rgba(254,90,19,0.05)' }"
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column prop="name" label="商品">
        <template slot-scope="scope">
          <el-image
            :src="scope.row.productImg.split(',')[0] | formatFile"
            class="cover"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="productTitle" label="商品名称"> </el-table-column>
      <el-table-column prop="date" label="时间 地点">
        <template slot-scope="scope">
          <div>{{ scope.row.createTime }}</div>
          <div>{{ scope.row.province }}{{ scope.row.city }}{{ scope.row.area }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="showPrice" label="价格">
        <template slot-scope="scope">
          <span>{{ scope.row.showPrice }}</span>
          <span>{{ scope.row.putType == 3 ? "/月" : "" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.isVerify == 1 ? "已核实" : "未核实" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作" width="120">
        <template slot-scope="scope">
          <el-button @click.native.prevent="handleEditPrice(scope.row)" type="text"
            >改价</el-button
          >
          <el-button @click.native.prevent="handleEdit(scope.row)" type="text"
            >编辑</el-button
          >
          <el-button
            @click.native.prevent="deleteRow(scope.row)"
            type="text"
            style="color: red"
            >删除</el-button
          >
          <el-button
            @click.native.prevent="handleUnmount(scope.row)"
            type="text"
            style="color: #3a71fb"
            >{{ scope.row.status == 1 ? "下架" : "上架" }}</el-button
          >
          <el-button @click.native.prevent="handleFreight(scope.row)" type="text" v-if="queryParams.putType != 3"
            >设置运费</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNo"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog
      title="设置运费"
      :visible.sync="dialogFormVisible"
      width="500px"
      center
      class="dialog"
    >
      <el-form :model="posterForm" :rules="posterRules" ref="posterForm">
        <el-form-item label="设置运费" prop="price" label-width="100px">
          <el-input
            v-model="posterForm.price"
            autocomplete="off"
            placeholder="请输入运费"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="width: 100px" @click="posterDiaClose">取 消</el-button>
        <el-button type="primary" style="width: 100px" @click="submitSetFreight"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <el-dialog
      title="改价"
      :visible.sync="dialogFormVisible2"
      width="500px"
      center
      class="dialog"
    >
      <el-form :model="editPriceForm" ref="editPriceForm" :rules="editPriceRules">
        <el-form-item label="当前价格" prop="oldShowPrice" label-width="100px" v-if="editPriceForm.putType != 3">
          <el-input
            v-model="editPriceForm.oldShowPrice"
            autocomplete="off"
            disabled
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="修改价格" prop="showPrice" label-width="100px" v-if="editPriceForm.putType != 3">
          <el-input
            v-model="editPriceForm.showPrice"
            autocomplete="off"
            placeholder="请输入"
          ></el-input>
        </el-form-item>

        <el-form-item label="日租金" prop="hgProductMaterialLease.dayRent" label-width="100px" 
            v-if="editPriceForm.putType == 3 && editPriceForm.productType == 2">
          <el-input
            v-model="editPriceForm.hgProductMaterialLease.dayRent"
            autocomplete="off"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="月租金" prop="hgProductMaterialLease.monthRent" label-width="100px" 
            v-if="editPriceForm.putType == 3 && editPriceForm.productType == 2">
          <el-input
            v-model="editPriceForm.hgProductMaterialLease.monthRent"
            autocomplete="off"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="年租金" prop="hgProductMaterialLease.yearRent" label-width="100px" 
            v-if="editPriceForm.putType == 3 && editPriceForm.productType == 2">
          <el-input
            v-model="editPriceForm.hgProductMaterialLease.yearRent"
            autocomplete="off"
            placeholder="请输入"
          ></el-input>
        </el-form-item>

        <el-form-item label="月租金" prop="hgProductEquipmentLease.monthRent" label-width="100px" 
            v-if="editPriceForm.putType == 3 && editPriceForm.productType == 1">
          <el-input
            v-model="editPriceForm.hgProductEquipmentLease.monthRent"
            autocomplete="off"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="台班租金" prop="hgProductEquipmentLease.classRent" label-width="100px" 
            v-if="editPriceForm.putType == 3 && editPriceForm.productType == 1">
          <el-input
            v-model="editPriceForm.hgProductEquipmentLease.classRent"
            autocomplete="off"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="小时租金" prop="hgProductEquipmentLease.hourRent" label-width="100px" 
            v-if="editPriceForm.putType == 3 && editPriceForm.productType == 1">
          <el-input
            v-model="editPriceForm.hgProductEquipmentLease.hourRent"
            autocomplete="off"
            placeholder="请输入"
          ></el-input>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="width: 100px" @click="dialogFormVisible2 = false"
          >取 消</el-button
        >
        <el-button type="primary" style="width: 100px" @click="submitPrice"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  deleteProduct,
  getProductList,
  setPostage,
  getProductDetail,
  changeStatus,
  changePrice,
} from "@/api/product.js";
export default {
  name: "demandList",

  data() {
    return {
      total: 10,
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        isMine: 1,
        putType: 1,
      },
      listData: [],
      total: 0,
      loading: true,
      form: {},
      dialogFormVisible: false,
      dialogFormVisible2: false,
      posterForm: {
        id: "",
        price: "",
      },
      posterRules: {
        price: [{ required: true, message: "运费不能为空", trigger: "blur" }],
      },
      editPriceForm: {
        oldShowPrice: '',
        id: "",
        showPrice: "",
        isSku: "",
        productType: "",
        putType: "",
        hgProductMaterialLease: {
          id: "",
          dayRent: "",
          monthRent: "",
          yearRent: "",
        },
        hgProductEquipmentLease: {
          id: "",
          monthRent: "",
          classRent: "",
          hourRent: "",
        },
        hgProductSkus: []
      },
      editPriceRules: {
        showPrice: [{ required: true, message: "修改价格不能为空", trigger: "blur" }],
        hgProductMaterialLease:{
          dayRent: [{ required: true, message: "日租金不能为空", trigger: "blur" }],
          monthRent: [{ required: true, message: "月租金不能为空", trigger: "blur" }],
          yearRent: [{ required: true, message: "年租金不能为空", trigger: "blur" }],
        },
        hgProductEquipmentLease:{
          monthRent: [{ required: true, message: "月租金不能为空", trigger: "blur" }],
          classRent: [{ required: true, message: "台班租金不能为空", trigger: "blur" }],
          hourRent: [{ required: true, message: "小时租金不能为空", trigger: "blur" }],
        }
      }
    };
  },
  watch: {
    $route: {
      immediate: true,
      handler(val) {
        const from = val.params.from;
        if (from == "device") {
          document.title = "厂商管理";
          this.queryParams.putType = 1;
        } else if (from == "used") {
          document.title = "二手管理";
          this.queryParams.putType = 2;
        } else if (from == "lease") {
          document.title = "租赁管理";
          this.queryParams.putType = 3;
        }
        this.initQuery();
      },
    },
  },
  methods: {
    initQuery() {
      this.queryParams.pageNo = 1;
      this.listData = [];
      this.getList();
    },
    getList() {
      this.loading = true;
      getProductList(this.queryParams).then((res) => {
        this.listData = res.result.records;
        this.total = res.result.total;
        this.loading = false;
      });
    },
    handleEdit(row) {
      if (row.putType != 3) {
        this.$router.push("/mineProductEdit/" + row.id);
      }else{
        this.$router.push("/mineProductEditRentout/" + row.id);
      }
    },
    deleteRow(row) {
      this.$modal
        .confirm("确定删除该商品？")
        .then((res) => {
          deleteProduct({ id: row.id }).then((res) => {
            this.$modal.msgSuccess("删除成功");
            this.getList();
          });
        })
        .catch((err) => {});
    },
    handleUnmount(row) {
      this.$modal
        .confirm(`确定${row.status == 1 ? "下架" : "上架"}该商品？`)
        .then((res) => {
          changeStatus({ id: row.id, status: row.status == 1 ? 2 : 1 }).then((res) => {
            this.$modal.msgSuccess((row.status == 1 ? "下架" : "上架") + "成功");
            this.getList();
          });
        })
        .catch((err) => {});
    },
    posterDiaClose() {
      this.dialogFormVisible = false;
      this.posterForm = {
        id: "",
        price: "",
      };
    },
    submitSetFreight() {
      this.$refs["posterForm"].validate((valid) => {
        if (valid) {
          setPostage(this.posterForm).then((res) => {
            this.$modal.msgSuccess("运费设置成功");
            this.getList();
            this.dialogFormVisible = false;
          });
        }
      });
    },
    handleFreight(row) {
      this.posterForm.id = row.id;
      this.posterForm.price = row.postagePrice;
      this.dialogFormVisible = true;
    },
    handleEditPrice(row) {
      this.editPriceForm = {
        oldShowPrice: '',
        id: "",
        showPrice: "",
        isSku: "",
        productType: "",
        putType: "",
        hgProductMaterialLease: {
          id: "",
          dayRent: "",
          monthRent: "",
          yearRent: "",
        },
        hgProductEquipmentLease: {
          id: "",
          monthRent: "",
          classRent: "",
          hourRent: "",
        },
        hgProductSkus: []
      }  
      getProductDetail({id: row.id}).then(res => {
        this.editPriceForm.id = row.id
					this.editPriceForm.productType = res.result.product_type
					this.editPriceForm.putType = res.result.put_type
					this.editPriceForm.isSku = res.result.is_sku
					if(this.editPriceForm.putType != 3){
						this.editPriceForm.oldShowPrice = '￥' + res.result.show_price
            this.editPriceForm.hgProductSkus = res.result.hgProductSkuList.map(item => ({skuName: item.skuName, skuPrice: item.skuPrice, skuStock: item.skuStock})) || []
					}
          else{
						// 租赁设备
						if(this.editPriceForm.productType === 1){
							this.editPriceForm.hgProductEquipmentLease.id = res.result.hgProductEquipmentLease.id
							this.editPriceForm.hgProductEquipmentLease.monthRent = res.result.hgProductEquipmentLease.monthRent
							this.editPriceForm.hgProductEquipmentLease.classRent = res.result.hgProductEquipmentLease.classRent
							this.editPriceForm.hgProductEquipmentLease.hourRent = res.result.hgProductEquipmentLease.hourRent
						}
            else{
							this.editPriceForm.hgProductMaterialLease.id = res.result.hgProductMaterialLease.id
							this.editPriceForm.hgProductMaterialLease.monthRent = res.result.hgProductMaterialLease.monthRent
							this.editPriceForm.hgProductMaterialLease.dayRent = res.result.hgProductMaterialLease.dayRent
							this.editPriceForm.hgProductMaterialLease.yearRent = res.result.hgProductMaterialLease.yearRent
						}
					}
          this.dialogFormVisible2 = true;
				})
      
    },
    submitPrice() {
      this.$refs["editPriceForm"].validate((valid) => {
        if (valid) {
          changePrice(this.editPriceForm).then((res) => {
            this.$modal.msgSuccess("改价成功");
            this.getList();
            this.dialogFormVisible2 = false;
          });
        }
      });
      
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  margin: auto;
  background: #f7f7f7;
}

.cover {
  width: 70px;
  height: 70px;
}

::v-deep .el-table thead {
  font-weight: normal;
  font-size: 14px;
  color: #000000;
}

::v-deep .pagination-container {
  width: 100%;
  padding: 50px 20px;
  box-sizing: border-box;
  background: #fff;
}

.dialog {
  ::v-deep .el-form-item__label {
    line-height: 56px;
    font-size: 18px;
    width: 120px;
  }

  // 设置文本框长度
  ::v-deep .el-input__inner {
    width: 380px;
    height: 46px;
    font-size: 16px;
  }
}
</style>
